<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input :placeholder="$t('table.title')" v-model="listQuery.keyword" style="width: 200px;" class="filter-item"/>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item">
        <el-option v-for="item in classifyList" :key="item.id" :label="item.title" :value="item.id"/>
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>

      <el-button v-waves class="add" type="primary" @click="showAddForm ">{{ $t('table.add') }}</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column :label="$t('table.wechatName')" prop="wechatName" align="center"/>
      <el-table-column :label="$t('table.openId')" prop="openId" align="center"/>
      <el-table-column :label="$t('table.wechatId')" prop="wechatId" align="center"/>
      <el-table-column :label="$t('table.introduction')" prop="introduction" align="center"/>
      <el-table-column :label="$t('table.actions')" width="150px" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteSubscription(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page-1" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="formInfo.title" :visible.sync="formInfo.isShow" width="80%" top="10vh">
      <div class="filter-container">
        <el-input v-model="formInfo.keyword" placeholder="请输入查询公众号名称" style="width: 200px;" class="filter-item"/>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="searchSubscription">{{ $t('table.search') }}</el-button>
      </div>
      <el-table
        v-loading="formInfo.isLoading"
        :data="formInfo.searchList"
        border
        height="350px"
        fit
        highlight-current-row
        style="width: 100%;">
        <el-table-column :label="$t('table.wechatName')" prop="wechatName" align="center"/>
        <el-table-column :label="$t('table.openId')" prop="openId" align="center"/>
        <el-table-column :label="$t('table.wechatId')" prop="wechatId" align="center"/>
        <el-table-column :label="$t('table.classify')" align="center">
          <template slot-scope="scope">
            <el-select v-model="formInfo.searchList[scope.$index].classifyId" style="width: 140px" class="filter-item">
              <el-option v-for="item in classifyList" :key="item.id" :label="item.title" :value="item.id"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.introduction')" prop="introduction" width="150px" align="center"/>
        <el-table-column :label="$t('table.actions')" width="150px" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addSubscription(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { fetchList, searchSub, addSubs, delSubs } from '@/api/subscription'
import { classifyList } from '@/api/classify'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'SubscriptionList',
  components: { Pagination },
  data() {
    return {
      listQuery: {
        page: 0,
        limit: 20,
        keyword: '',
        listLoading: true,
        ff: '',
        tableKey: 0
      },
      list: null,
      classifyList: null,
      total: 0,
      formInfo: {
        title: '添加公众号',
        isShow: false,
        keyword: '',
        isLoading: false,
        searchList: null
      },
      selectChangeData: []
    }
  },
  created() {
    this.getList()
    this.getClassifyList()
  },
  methods: {

    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.count
        this.listLoading = false
      })
    },

    getClassifyList() {
      classifyList().then(response => {
        this.classifyList = response.data.data
        console.info(this.classifyList)
      })
    },

    handleFilter() {
      this.listQuery.page = 0
      this.getList()
    },

    showAddForm() {
      this.formInfo.isShow = true
    },

    searchSubscription() {
      if (this.formInfo.isLoading) {
        return
      }
      this.formInfo.isLoading = true
      searchSub(this.formInfo).then(response => {
        this.formInfo.searchList = response.data.data
        this.formInfo.isLoading = false
        console.info(this.formInfo.searchList)
      })
    },

    addSubscription(data) {
      if (!data.classifyId) {
        this.$message({
          message: '请选中分类',
          type: 'warning'
        })
        return
      }

      if (this.formInfo.isLoading) {
        return
      }
      this.formInfo.isLoading = true
      addSubs(data).then(response => {
        this.formInfo.isLoading = false

        if (response.status == 200) {
          var data = response.data

          if (data.code == 1 || data.code == -1) {
            this.$message({
              showClose: true,
              message: data.msg,
              duration: 0,
              type: data.code == 1 ? 'warning' : 'error'
            })
          } else {
            this.$message({
              showClose: true,
              message: '保存成功',
              duration: 0,
              type: 'success'
            })
          }
          //
        } else {
          this.$message({
            showClose: true,
            message: '出错啦，请重新再试',
            duration: 0,
            type: 'error'
          })
        }

        console.info(response)
      })
    },

    deleteSubscription(data) {
      this.$confirm('此操作取消公众号爬取, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        delSubs({ id: data.id }).then(response => {
          this.listLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          var self = this
          setTimeout(function() {
            self.getList()
          }, 1000)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}

</script>
<style>
  .add{
    float: right;
  }
</style>
